<template>
	<view class="page">
		<!-- tab选项 -->
		<view class="flex-around" style="border-bottom: 1px solid #e6e6e8">
			<view v-for="(item, index) in topList" :key="index"
				:class="[item.default ? 'screen-item-avtive' : 'screen-item']" @click="changeTabs(item)">{{ item.name }}
			</view>
		</view>

		<view class="list">
			<view class="item" v-for="(item, index) in makeList">
				<view class="item-head">
					<!-- 左侧内容组（会议名称 + 物业提示） -->
					<view class="left-group">
						<view class="head-title">{{ item.meetingName }}</view>
						<view class="price text-sm text-gray-500" style="margin-left: 30rpx;"
							v-if="!item?.meeting?.meetingTopic">需联系物业开门</view>
					</view>

					<!-- 右侧内容组（状态 + 图标） -->
					<view class="right-group">
						<view class="head-type">{{ item.status?.desc }}</view>
						<view @click="open" v-if="item.status?.code==0 && item?.meeting?.meetingTopic">
							<uni-icons @click="showOpenAlert = true" :color="'rgba(100, 194, 149, 1)'" type="help" size="30"></uni-icons>
						</view>
						<u-popup width="600rpx" :mask='true'  border-radius="14" mode="center" v-model="showOpenAlert">
							<view class="beautify-tip">
							  确定签到后可获取会议室门禁临时密码
							  </br>
							  同时订单将不可取消！
							</view>
						</u-popup>
					</view>
				</view>

				<view class="item-content">
					<image class="content-img" :src="path+item.meeting.meetingImg"></image>

					<view class="content-time">
						<view>预定会议:{{ item.meetingName }}</view>
						<view class="time">下单时间:{{ item.createTime }}</view>
						<view class="time">开始时间:{{ item.startDate }}</view>
						<view class="time">结束时间:{{ item.endDate }}</view>
					</view>
				</view>
				<view class="item-order">
					<view>订单号:</view>
					<view>{{ item.orderNo }}</view>
				</view>
				<!-- <view class="item-order">
          <view>支付方式:</view>
          <view>{{ item.payStatus?.desc }}</view>
        </view>
        <view class="item-order">
          <view>支付时间:</view>
          <view>{{ item.payTime }}</view>
        </view> -->
				<view class="init"></view>
				<view class="btn">
					<view class="btn1" v-if="item?.status?.code == 0" @click="order(4, item.orderNo)">取消订单</view>
					<view class="btn2" v-if="item?.status?.code == 0 && item?.meeting?.meetingTopic"
						@click="order(1, item.orderNo)">确定签到</view>
					<view class="btn3" v-if="item?.status?.code != 4" @click="goUrl(item)">查看详情</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPath,
		expOperation
	} from "@/api/main/main";
	import {
		getOrderByList
	} from "@/api/main/order";
	export default {
		data() {
			return {
				showOpenAlert:false,
				path: getPath(),
				status: 0, // 状态
				//展示tab款的内容
				//0 已预约 1 进行中 2已完成 3未支付 4已取消
				topList: [{
						name: "全部",
						default: true,
						// default: false,
						id: 0,
					},
					{
						name: "已预约",
						default: false,
						// default: true,
						id: 1,
					},
					{
						name: "进行中",
						default: false,
						// default: true,
						id: 2,
					},
					{
						name: "已完成",
						default: false,
						// default: true,
						id: 3,
					},
					{
						name: "未支付",
						default: false,
						// default: true,
						id: 4,
					},
					{
						name: "已取消",
						default: false,
						// default: true,
						id: 5,
					},
				],
				makeList: [],
			};
		},
		onLoad(o) {},
		onPullDownRefresh() {
			let token = uni.getStorageSync("token");
			console.log('====', token)
			if (token) {
				this.getOrderByArray();
			}
		},
		onShow() {
			this.setStatus();
			// this.getOrderByArray();
			let token = uni.getStorageSync("token");
			if (token) {
				this.getOrderByArray();
			}
		},
		methods: {
			open() {
				console.log("====open===");
				
			},
			setStatus() {
				this.status = 0;
				const stat = uni.getStorageSync("status");
				if (stat) {
					this.status = stat;
					uni.setStorageSync("status", null);
					this.changeTabs(this.topList[1]);
				}
			},
			//点击tab跳转
			changeTabs(item) {
				console.log("点击跳转  ", item);
				let obj = this.topList.find((v) => v.default);
				if (obj) {
					obj.default = false;
					item.default = true;
				}
				this.status = item.id;
				uni.setStorageSync("status", item.id)
				// 	this.getRequestList()
				this.getOrderByArray();
			},
			goUrl(item) {
				uni.navigateTo({
					url: "./details?item=" + JSON.stringify(item),
				});
			},
			getOrderByArray() {
				const _this = this;
				getOrderByList({
					status: uni.getStorageSync("status") == 0 ? "" : uni.getStorageSync("status") - 1
				}).then(
					(res) => {
						console.log('===========')
						_this.makeList = res.data;
						uni.stopPullDownRefresh();
					}
				).catch(err => {
					if (err.code === 401) {
						_this.makeList = [];
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/my/index'
							})
						}, 1000)
					}
					uni.stopPullDownRefresh();
					console.log('===', err)
				});
			},
			order(row, orderId) {
				var than = this;
				uni.showModal({
					title: '提示',
					content: `是否${row == 1 ? '【确认】' : '【取消】'}订单`,
					success: (res) => {
						if (res.confirm) { 
							expOperation({
								orderNo: orderId,
								status: row,
							}).then((res) => {
								uni.showToast({
									title: row == 1 ? "确认成功" : "取消成功"
								});
								than.getOrderByArray();
							});
						}
					}
				})
			},
		},
	};
</script>

<style>
	.page {
		height: 100vh;
		overflow-y: auto;
		background-color: rgba(245, 245, 245, 1);
	}

	.flex-around {
		display: flex;
		justify-content: space-around;
		width: 100vw;
		background: rgba(255, 255, 255, 1);
	}

	/* 点击文字的颜色 */
	.screen-item-avtive {
		position: relative;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		color: rgba(100, 194, 149, 1);
		letter-spacing: 2rpx;
		padding: 24rpx 0;
	}

	/* 本来展示的颜色 */
	.screen-item {
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		color: #333;
		letter-spacing: 2rpx;
		padding: 24rpx 0;
	}

	/* 点击的底部线条颜色 */
	.screen-item-avtive::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 0;
		height: 4rpx;
		background-color: rgba(100, 194, 149, 1);
		width: 50%;
		transform: translateX(-50%);
		border-radius: 4rpx;
		animation: change 1s linear;
	}

	.list {
		padding: 33rpx;
	}

	.item {
		width: 684rpx;
		opacity: 1;
		border-radius: 18rpx;
		background: rgba(255, 255, 255, 1);
		border: 2rpx solid rgba(255, 255, 255, 1);
		padding: 26rpx 22rpx;
		margin-bottom: 20rpx;
	}

	.item-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.head-title {
		font-size: 34rpx;
		font-weight: 500;
		color: rgba(34, 34, 34, 1);
	}

	.head-type {
		font-size: 30rpx;
		font-weight: 400;
		color: rgba(100, 194, 149, 1);
	}

	.item-content {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
	}

	.content-img {
		width: 210rpx;
		height: 300rpx;
		/* border: 1rpx solid #000; */
		margin-right: 20rpx;
		border-radius: 8rpx;
	}

	.time {
		margin-top: 20rpx;
	}

	.item-order {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	.init {
		width: 100%;
		border: 2rpx solid rgba(240, 240, 240, 1);
		margin: 30rpx 0;
	}

	.btn {
		display: flex;
		justify-content: flex-end;
	}

	.btn1 {
		width: 166rpx;
		height: 66rpx;
		border-radius: 8rpx;
		background: rgba(255, 255, 255, 1);
		border: 2rpx solid rgba(194, 194, 194, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		font-weight: 400;
		margin-left: 20rpx;
	}

	.btn2 {
		width: 166rpx;
		height: 66rpx;
		border-radius: 8rpx;
		background: rgba(255, 255, 255, 1);
		border: 2rpx solid rgba(100, 194, 149, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		font-weight: 400;
		margin-left: 20rpx;
		color: rgba(100, 194, 149, 1);
	}

	.price {
		font-size: 28rpx;
		color: #FF6B6B;
		font-weight: 600;
	}

	.btn3 {
		width: 166rpx;
		height: 66rpx;
		border-radius: 8rpx;
		background: rgba(100, 194, 149, 1);
		border: 2rpx solid rgba(194, 194, 194, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		font-weight: 400;
		margin-left: 20rpx;
		color: rgba(255, 255, 255, 1);
	}

	.item-head {
		display: flex;
		/* 启用弹性布局 */
		align-items: center;
		/* 垂直居中 */
		justify-content: space-between;
		/* 左右内容分离 */
		width: 100%;
		/* 占满容器宽度 */
	}

	.left-group {
		display: flex;
		/* 左侧内容横向排列 */
		align-items: center;
	}

	.right-group {
		display: flex;
		/* 右侧内容横向排列 */
		align-items: center;
	}

	.head-type {
		font-size: 30rpx;
		font-weight: 400;
		color: rgba(100, 194, 149, 1);
		margin-right: 16rpx;
		/* 状态与图标间的间距 */
	}
	
	.beautify-tip {
	  background: #FFF5EB; /* 浅黄色背景（警告场景） */
	  border-radius: 12rpx; /* 圆角 */
	  padding: 35rpx 50rpx; /* 微调内边距 */
	}
</style>